<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件树：父组件与子组件</title>
</head>

<body>

    <!-- 组件的层级关系 -->
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 3. 使用组件 -->
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>

    <script>
        const cpnC2 = Vue.extend({
            template: `
                <div>
                    <h2>组件中的标题2</h2>
                    <p>组件中的内容2</p>
                    <button>button</button>
                    <my-cpn></my-cpn>
                </div>
            `
        })

        const cpnC3 = Vue.extend({
            template: `
                <div>
                    <h2>组件中的标题3</h2>
                    <p>组件中的内容3</p>
                    <button>button</button>
                </div>
            `
        })

        // 1.创建组件构造器
        const cpnC1 = Vue.extend({
            template: `
                <div>
                    <h2>组件中的标题1</h2>
                    <p>组件中的内容1</p>
                    <button>button</button>
                    <cpn2>
                        
                    </cpn2>

                </div>
            `,
            components: {
                // 组件内注册
                // 总结： 父子组件实现了层级关系，使用的时候看清楚声明的位置，这里属于组件内注册，在某个组件内注册
                // 可以在组件中template模板里使用，但是不可以在全局中使用。
                // 全局注册的组件，可以在任何位置被使用
                // 局部注册的组件，只能在实例范围内被使用，不包含组件范围内
                cpn2: cpnC2
            }
        })

        // 2. 注册组件
        // 全局注册
        Vue.component("my-cpn",cpnC3)
        // 实例
        let app = new Vue({
            el: "#app",
            data: {

            },
            // 局部注册
            components: {
                cpn1: cpnC1, // 平级关系
                // cpn2:cpnC2
            }
        })


    </script>
</body>

</html>